<template>
  <div class="home">
    <!-- 搜索 -->
    <van-search v-model="value" shape="round" background="#079f40" placeholder="请输入搜索关键词" />

    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" height="200">
      <van-swipe-item v-for="item in bannerUrl"><img :src="item.imageUrl"></van-swipe-item>
    </van-swipe>
  </div>

  <!-- 分类 -->
  <van-grid class="category" icon-size='40' >
    <van-grid-item 
    v-for="item in category" 
    :key="item.id"
    :icon="item.image" 
    :text="item.title"
    @click="a(item.id)"
    />
  </van-grid>

  <!-- 抢购 -->
  <div class="time-limit">
    <div class="time-top">
      <span>限时抢购</span>
      <van-count-down :time="time">
        <template #default="timeData">
          <span class="block">{{ timeData.hours }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.minutes }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.seconds }}</span>
        </template>
      </van-count-down>
      <span @click="jumpToMore">更多 >></span>
    </div>
    <div class="time-bottom">
      <swiper :slides-per-view="3" :space-between="50" :loop="false" :free-mode="true">
        <swiper-slide v-for="item in swiperList" :key="item.id">
          <div class="swiper-top">
            <img :src="item.image"   @click="toDetail">
          </div>
          <div class="swiper-bottom">
            <div class="title">
              <span>{{ item.title }}</span>
              <span>{{ item.detail }}</span>
            </div>
            <div class="price">
             <div>
              <b>￥{{ item.price }}</b><br>
              <s>{{ item.salePrice }}</s>
             </div>
              <cart :item="item"></cart>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>

  <!-- 推荐列表 -->
  <van-tabs v-model:active="activeName" :animated="true" :swipeable="true">
    <van-tab v-for="value in sellList"  :title="value">
         <!-- 商品长列表 -->
        <van-list v-model:loading="loading">
          <van-cell v-for="item in categoryList" :key="item.id">
            <van-card 
            :price="formatMoney(item.price)" 
            :title="item.title" 
            :thumb="item.image" 
            origin-price="999.00"
            thumb-link="/detail">
            <template #tag background="red">  
              <span v-show="value === '推荐'">推荐</span>
              <span v-show="value === '人气'">人气</span>
              <span v-show="value === '平价'">平价</span>
            </template>
              <template #num>
                <span>月销量: {{ item.saleNum }}</span>
                <cart :item="item"></cart>
              </template>
            </van-card>
          </van-cell>
        </van-list>
    </van-tab>
  </van-tabs>

</template>

<script setup>
import { ref, reactive } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/free-mode'
import { getHomeData } from '@/api/home'
import { useRouter } from 'vue-router'
import cart from '../../components/addToCart/index.vue'
const router = useRouter()

const value = ref()   //搜索的value
const bannerUrl = ref([])  //轮播图数组
const sellList = ref(['推荐','人气','平价'])
//分类数据
const category = reactive([
  {
    id: 1,
    title: '水果',
    image: 'https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/%E9%A6%96%E9%A1%B5/u147.png'
  },
  {
    id: 2,
    title: '蔬菜',
    image: 'https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/%E9%A6%96%E9%A1%B5/u228.png'
  },
  {
    id: 3,
    title: '海鲜',
    image: 'https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/%E9%A6%96%E9%A1%B5/u157.png'
  },
  {
    id: 4,
    title: '肉禽类',
    image: 'https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/%E9%A6%96%E9%A1%B5/u62.png'
  },
])
// 抢购数据   
const swiperList = reactive([
  {
    id: 1,
    image: 'https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/%E9%A6%96%E9%A1%B5/u92.png',
    title: '牛油果',
    detail: '约500克',
    price: '28.00',
    salePrice: '￥30.00'
  },
  {
    id: 2,
    image: 'https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/%E9%A6%96%E9%A1%B5/u95.png',
    title: '橙子',
    detail: '约500克',
    price: '8.00',
    salePrice: '￥10.00'
  },
  {
    id: 3,
    image: 'https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/%E9%A6%96%E9%A1%B5/u110.png',
    title: '油菜',
    detail: '约500克',
    price: '2.00',
    salePrice: '￥5.00'
  },
  {
    id: 4,
    image: 'https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/%E9%A6%96%E9%A1%B5/u118.png',
    title: '猪前尖',
    detail: '约500克',
    price: '25.00',
    salePrice: '￥28.00'
  },
  {
    id: 5,
    image: 'https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/%E9%A6%96%E9%A1%B5/u132.png',
    title: '越南巴沙鱼',
    detail: '约450克',
    price: '30.00',
    salePrice: '￥40.00'
  },
  {
    id: 5,
    image: 'https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/%E9%A6%96%E9%A1%B5/u167.png',
    title: '河北梨',
    detail: '约1500克',
    price: '12.00',
    salePrice: '￥15.00'
  },
  {
    id: 6,
    image: 'https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/%E9%A6%96%E9%A1%B5/u184.png',
    title: '澳洲牛排',
    detail: '1200克',
    price: '199.00',
    salePrice: '￥299.00'
  },
  {
    id: 7,
    image: 'https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/%E9%A6%96%E9%A1%B5/u251.png',
    title: '大鲜虾',
    detail: '300克',
    price: '66.00',
    salePrice: '￥100.00'
  },
  {
    id: 8,
    image: 'https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/%E9%A6%96%E9%A1%B5/u255.png',
    title: '排骨',
    detail: '三斤装',
    price: '69.00',
    salePrice: '￥99.00'
  },
])

const time = ref(50000000000000)   //倒计时

const activeName = ref()

// 长列表数据
const categoryList = ref([]);
const loading = ref(false);

const jumpToMore = () => {
  router.push('/more')
}
const toDetail = ()=>{
  router.push('/detail')  
}

//获取主页数据
const homeData = async () => {
  const result = await getHomeData()
  const { banner, list } = result
  bannerUrl.value.push(...banner)
  categoryList.value.push(...list)
  // console.log(result)
}
homeData()

//格式化商品数据
const formatMoney = (val) => {
  return Number(val).toFixed(2)
} 

const a = (val)=>{
  router.push('/category'+'/'+val)
}
</script>


<style>
body,
html {
  background: #eee;
  ;
}
</style>
<style  scoped >
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

/**分类 */
:deep(.van-icon__image) {
  border: 1px solid #079f40;
  border-radius: 50%;
}

.category {
  margin: 15px 0;
}

/**抢购上部分 */
.time-limit .time-top {
  background: #fff;
  padding: 0 8px;
  display: flex;
  justify-content: space-between;
}

.time-limit .time-top>span:nth-of-type(1) {
  color: #999;
  font-size: 16px;
  line-height: 36.8px;
}

.time-limit .time-top span:nth-of-type(2) {
  color: #079f40;
  font-size: 12px;
  line-height: 36.8px;
}

/**抢购倒计时*/
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}

.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}

/**抢购数据部分 */
.time-bottom {
  background: #fff;
}

.swiper-slide {
  width: 110px !important;
  height: 194px;
  margin-right: 10px !important;
  margin-top: 10px;
  margin-bottom: -20px;
}

.swiper-slide .swiper-top {
  width: 100%;
  height: 44%;
  margin-bottom: 10px;
}

.swiper-slide .swiper-top img {
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.swiper-slide .swiper-bottom .title {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
}
.swiper-slide .swiper-bottom .price{
display: flex;
justify-content: space-around;
}
span {
  font-size: 12px;
}

b {
  color: red;
}

s {
  font-size: 12px;
  color: #999;
}

:deep(.van-card__num){
  width: 100px;
  display: flex !important;
  justify-content:space-between !important;
}
:deep(.van-card__price-integer) {
  color: #ee0a24;
}

:deep(.van-card__price-currency) {
  color: #ee0a24;
}
:deep(.van-card__tag){
  background: red;
  color: #fff;
  width: 30px;
  border-radius: 8px;
  text-align: center;
}
</style>
